<template>
	<view class="content">
		<pyh-nv :config="config"></pyh-nv>
		<!-- <u-navbar title=" " bgColor="transparent" autoBack='true'></u-navbar> -->
		<!-- <u-navbar
			title=" " 
			leftIconColor="#ffffff" 
			bgColor="transparent" 
			autoBack='true'
		></u-navbar> -->
		<view class="topBox">
			<image :src="content.image" class="cover" v-if="content.image"></image>
			<image :src="content.cover" class="cover" v-else></image>
			<text class="title">{{content.name}}</text>
			<view class="itemBox">
				<image :src="baseurl+'association/person.png'" class="personIcon"></image>
				<text class="itemText">主办方：{{content.sponsor}}</text>
			</view>
			<view class="itemBox">
				<image :src="baseurl+'association/time.png'" class="timeIcon"></image>
				<text
					class="itemText">活动时间：{{$timestampToTime(content.start_time)}}至{{$timestampToTime(content.end_time)}}</text>
			</view>
			<view class="itemBox">
				<image :src="baseurl+'associationAdd/17.png?v=1.0'" class="personIcon"></image>
				<text class="itemText">
					报名资格：{{ ['所有人', '主理人', '社群成员'][content.condition] }}
				</text>
			</view>
			<view class="itemBox">
				<image :src="baseurl+'association/address.png'" class="addressIcon"></image>
				<text class="itemText">活动地点：{{content.address}}</text>
			</view>
			<view class="progressBox" v-if="isShow==true">
				<text class="progressLabel">报名进度：</text>
				<view class="outer">
					<view class="inner" :style="{ width: innerBarWidth+'%'}">
					</view>
				</view>
				<text class="num">{{content.community_activity_apply_count}}/{{content.num}}</text>
			</view>
			<image :src="baseurl+'associationAdd/10.png'" v-if="content.status==1" class="typeIcon"></image>
			<image :src="baseurl+'associationAdd/11.png'" v-if="content.status==2" class="typeIcon"></image>
		</view>
		<view class="infoBox">
			<view class="menuBox">
				<view class="menuItem" :class="menuIndex==0?'menuActive':''" @click="changeMenu(0)">
					活动介绍
				</view>
				<view class="menuItem" :class="menuIndex==1?'menuActive':''" @click="changeMenu(1)" v-if="isShow==true">
					活动须知
				</view>
			</view>
			<mp-html :content="content.into" v-if="menuIndex==0" style="line-height: 24px;" />
			<mp-html :content="content.attention" v-else style="line-height: 24px;" />
		</view>
		<view class="bottomMenuBox">
			<image :src="baseurl+'association/icon8.png'" class="share"></image>
			<button open-type="share" class="shareBtn"></button>
			<view class="btn" @click="showSubmit()" v-if="content.status==1">
				活动报名
			</view>
			<view class="endBtn" v-if="content.status==2">
				已结束
			</view>
			<view class="endBtn" v-if="content.status==0">
				未开始
			</view>
		</view>
		<!-- 所有人可以报名 -->
		<view class="application" v-if="isSubmit">
			<view class="applicationHead">
				<image :src="baseurl+'association/step1.png'" class="step"></image>
				<image :src="baseurl+'association/close_black.png'" class="close" @click="closeSubmit()"></image>
			</view>
			<!-- 不是主理人提示 -->
			<view class="notAdmin" v-if="isAdmin">
				<image :src="baseurl+'associationAdd/14.png'" class="notAdminIcon"></image>
				<text class="notAdminTitle">您还不是主理人</text>
				<text class="notAdminDesc">很遗憾，该活动仅主理人可报名</text>
				<view class="notAdminBtn" @click="$navto.navto('/packageB/association_establish/association_establish')">
					成为主理人
				</view>
			</view>
			<!-- 不是社群成员提示 -->
			<view class="notAdmin" v-if="isMember">
				<image :src="baseurl+'associationAdd/14.png'" class="notAdminIcon"></image>
				<text class="notAdminTitle">您还不是社群成员</text>
				<text class="notAdminDesc">很遗憾，该活动仅此社群成员可报名</text>
				<view class="notAdminBtn" @click="$navto.navto('/packageB/association_info/association_info',{id:content.community.id})">
					加入社群
				</view>
			</view>
			<!-- 所有人报名 -->
			<view class="normal" v-if="isNormal">
				<view class="inputItem">
					<text class="inputlabel">您的姓名：</text>
					<input type="text" placeholder="请填写您的姓名" class="input" v-model="name" />
				</view>
				<view class="inputItem">
					<text class="inputlabel">您的年龄：</text>
					<input type="text" placeholder="请填写您的年龄" class="input" v-model="age" />
				</view>
				<view class="inputItem">
					<text class="inputlabel">电话号码：</text>
					<input type="text" placeholder="请输入您的电话号码" class="input" v-model="tel" maxlength="11" />
				</view>
				<view class="inputItem">
					<text class="inputlabel">获知渠道：</text>
					<uni-data-select :clear="false" v-model="ditch_id" :localdata="ditchArr"
						@change="changeDitch"></uni-data-select>
				</view>
				<view class="inputItem">
					<text class="inputlabel">是否为业主：</text>
					<view class="selBox">
						<image :src="baseurl+'association/seled.png'" class="sel" v-if="selOwner==1"></image>
						<image :src="baseurl+'association/sel.png'" class="sel" v-else @click="changeOwner(1)"></image>
						<text class="sellabel">是</text>
						<image :src="baseurl+'association/seled.png'" class="sel" style="margin-left: 83rpx;"
							v-if="selOwner==2"></image>
						<image :src="baseurl+'association/sel.png'" class="sel" style="margin-left: 83rpx;" v-else
							@click="changeOwner(2)"></image>
						<text class="sellabel">否</text>
					</view>
				</view>
				<view class="submit" @click="submit()">
					活动报名
				</view>
			</view>
			<!-- 社员报名 -->
			<view class="normal" v-if="isMemberSub">
				<view class="inputItem">
					<text class="inputlabel">您的姓名：</text>
					<input type="text" placeholder="请填写您的姓名" class="input" v-model="name" />
				</view>
				<view class="inputItem">
					<text class="inputlabel">电话号码：</text>
					<input type="text" placeholder="请输入您的电话号码" class="input" v-model="tel" maxlength="11" />
				</view>
				<view class="inputItem">
					<text class="inputlabel">联系主理人：</text>
					<view class="contactBox">
						<text class="contactTel" @click="$phone(content.community.principal_mobile)">{{content.community.principal_mobile}}</text>
						<image :src="baseurl+'associationAdd/16.png'" class="copy" @click="$copyText(content.community.principal_mobile)"></image>
					</view>
				</view>
				<view class="submit" @click="submitMember()">
					活动报名
				</view>
			</view>
			<!-- 主理人报名 -->
			<view class="normal" v-if="isAdminSub">
				<view class="inputItem">
					<text class="inputlabel">您的姓名：</text>
					<input type="text" placeholder="请填写您的姓名" class="input" v-model="name" />
				</view>
				<view class="inputItem">
					<text class="inputlabel">电话号码：</text>
					<input type="text" placeholder="请填写您的电话号码" class="input" v-model="tel" maxlength="11" />
				</view>
				<view class="inputItem">
					<text class="inputlabel">所成立社群：</text>
					<input type="text" placeholder="请填写所成立社群" class="input" v-model="community"/>
				</view>
				<view class="submit" @click="submitAdmin()">
					活动报名
				</view>
			</view>
		</view>
		<!-- 报名成功 -->
		<view class="success" v-if="isSuccess">
			<view class="applicationHead">
				<image :src="baseurl+'association/step2.png'" class="step"></image>
				<image :src="baseurl+'association/close_black.png'" class="close" @click="closeSubmit()"></image>
			</view>
			<view class="qrcodeBox">
				<u-qrcode ref="qrcode" class="qrcode" canvas-id="qr" :value="'2&'+text" :size="size"></u-qrcode>
			</view>
			<text class="qrTips">参加活动时，请出示二维码入场</text>
			<view class="submit" @click="saveImg">
				保存凭证
			</view>
		</view>
		<!-- 报名失败 -->
		<view class="fail" v-if="isFail">
			<view class="applicationHead">
				<image :src="baseurl+'association/step2.png'" class="step"></image>
				<image :src="baseurl+'association/close_black.png'" class="close" @click="closeSubmit()"></image>
			</view>
			<image :src="baseurl+'association/fail.png'" class="failIcon"></image>
			<text class="failResult">报名失败</text>
			<text class="failTips">{{failMsg}}</text>
			<view class="submit" @click="closeSubmit()">
				再次报名
			</view>
		</view>
		<poster ref="poster" :list="list" background-color="#FFF" :width="750" :height="1120"
			@on-success="posterSuccess" @on-error="posterError"></poster>
	</view>
</template>

<script>
	import Cache from '@/utils/cache'
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import Poster from '../components/zhangyuhao-poster/Poster.vue';
	export default {
		components: {
			Poster
		},
		data() {
			return {
				baseurl: this.$baseurl,
				config: {
					title: ' ',
					bgColor: 'transparent',
					color: '#000000',
				},
				menuIndex: 0,
				selOwner: 0,
				isSubmit: false,
				isSuccess: false,
				isFail: false,
				isShow: true,
				text: '',
				size: 140,
				content: '',
				innerBarWidth: 0,
				ditch_id: '',
				ditchArr: [],
				owner: '',
				id: '',
				name: '',
				tel: '',
				age: '',
				list: [],
				failMsg: '很遗憾报名失败，再次报名试试！',
				isNormal: false,
				isAdmin: false,
				isMember: false,
				isMemberSub: false,
				isAdminSub: false,
				tips: '',
				community:''
			}
		},
		onShow() {
			this.getUser();
		},
		onLoad(options) {
			console.log(options)
			//查询活动详情
			// this.id = 13;
			this.id = options.id;
			this.$request.get(`CommunityActivity/activityDetail?id=${this.id}`).then(res => {
				console.log(res.data.data);
				this.content = res.data.data;
				//计算进度条
				this.innerBarWidth = (this.content.community_activity_apply_count / this.content.num) * 100
			})
			// 查询自己的资格
			this.$request.get(`CommunityActivityApply/user_verify?activity_id=${this.id}`).then(res => {
				console.log(res.data.data);
				this.tips = res.data.data;
			})
			//获取渠道列表
			this.$request.get(`CommunityLearn/community_learn_list`).then(res => {
				for (var i = 0; i < res.data.data.length; i++) {
					let obj = {};
					obj.value = i;
					obj.id = res.data.data[i].id;
					obj.text = res.data.data[i].name;
					this.ditchArr.push(obj);
				}
			})
		},
		methods: {
			...mapActions(['getCartNum', 'getUser']),
			changeDitch(e) {
				console.log(e);
				this.ditch_id = this.ditchArr[e].id;
			},
			// 群成员报名
			submitMember() {
				if (this.name == '') {
					this.$u.toast('请填写您的姓名')
					return;
				}
				if (this.tel == '') {
					this.$u.toast('请填写您的电话')
					return;
				}
				if (!(/^1[3|4|5|6|8|7|9][0-9]\d{8}$/.test(this.tel))) {
					this.$u.toast('电话号码格式不正确')
					return;
				}
				this.$request.post(`CommunityActivityApply/activityApply`, {
					activity_id:this.id,
					name: this.name,
					phone: this.tel,
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) { //成功
						this.text = res.data.data.id;
						this.isSuccess = true;
						this.isSubmit = false;
					} else {
						this.isFail = true;
						this.isSubmit = false;
						this.failMsg = res.data.msg;
					}
				})
			},
			// 主理人报名
			submitAdmin() {
				if (this.name == '') {
					this.$u.toast('请填写您的姓名')
					return;
				}
				if (this.tel == '') {
					this.$u.toast('请填写您的电话')
					return;
				}
				if (!(/^1[3|4|5|6|8|7|9][0-9]\d{8}$/.test(this.tel))) {
					this.$u.toast('电话号码格式不正确')
					return;
				}
				if (this.community === '') {
					this.$u.toast('请填写所成立的社群')
					return;
				}
				this.$request.post(`CommunityActivityApply/activityApply`, {
					activity_id:this.id,
					name: this.name,
					phone: this.tel,
					community: this.community
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) { //成功
						this.text = res.data.data.id;
						this.isSuccess = true;
						this.isSubmit = false;
					} else {
						this.isFail = true;
						this.isSubmit = false;
						this.failMsg = res.data.msg;
					}
				})
			},
			submit() {
				if (this.name == '') {
					this.$u.toast('请填写您的姓名')
					return;
				}
				if (this.age == '') {
					this.$u.toast('请填写您的年龄')
					return;
				}
				if (this.tel == '') {
					this.$u.toast('请填写您的电话')
					return;
				}
				if (!(/^1[3|4|5|6|8|7|9][0-9]\d{8}$/.test(this.tel))) {
					this.$u.toast('电话号码格式不正确')
					return;
				}
				if (this.ditch_id === '') {
					this.$u.toast('请选择获知渠道')
					return;
				}
				if (this.owner === '') {
					this.$u.toast('请选择是否为业主')
					return;
				}
				this.$request.post(`CommunityActivityApply/activityApply`, {
					name: this.name,
					age: this.age,
					phone: this.tel,
					channel: this.ditch_id,
					is_owner: this.owner,
					activity_id: this.id
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) { //成功
						this.text = res.data.data.id;
						this.isSuccess = true;
						this.isSubmit = false;
					} else {
						this.isFail = true;
						this.isSubmit = false;
						this.failMsg = res.data.msg;
					}
				})
			},
			changeOwner(num) {
				this.selOwner = num;
				if (num == 1) {
					this.owner = 1;
				} else {
					this.owner = 0;
				}
			},
			closeSubmit() {
				this.isSubmit = false;
				this.isFail = false;
				this.isSuccess = false;
			},
			showSubmit() { //判断是谁提交报名
				console.log(this.content.condition == 0)
				if (this.content.condition == 0) { //所有人报名
					this.isNormal = true;
				}
				if (this.content.condition == 1) { //助理人报名
					if (this.tips == '你不是社群主理人') {
						this.isAdmin = true;
					} else {
						this.isAdminSub = true;
					}
				}
				if (this.content.condition == 2) { //社群成员人报名
					if (this.tips == '你不是该社群成员') {
						this.isMember = true;
					} else {
						this.isMemberSub = true;
					}
				}
				this.isSubmit = true;
			},
			changeMenu(num) {
				this.menuIndex = num;
			},
			posterError(err) {
				console.log(err)
			},
			posterSuccess(url) {
				// 生成成功，会把临时路径在这里返回
				this.poster = url;
				uni.saveImageToPhotosAlbum({
					filePath: this.poster,
					success: res => {
						console.log('save success');
						this.$u.toast("保存成功")
					}
				});
				console.log(url)
			},
			saveImg() {
				// uqrcode为组件的ref名称
				this.$refs.qrcode.toTempFilePath({
					success: res => {
						// this.qrcodeUrl = res.tempFilePath;
						var base64data = res.tempFilePath; // base64
						const fsm = wx.getFileSystemManager();
						const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名
						const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
						if (!format) {
							return (new Error('ERROR_BASE64SRC_PARSE'));
						}
						const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
						const buffer = wx.base64ToArrayBuffer(bodyData);
						let that = this;
						fsm.writeFile({
							filePath,
							data: buffer,
							encoding: 'binary',
							success(r) {
								console.log(r, 'r')
								console.log(filePath, 'filePath；')
								that.qrcodeUrl = filePath;
							},
							fail() {
								return (new Error('ERROR_BASE64SRC_WRITE'));
							},
						});
					}
				});
				setTimeout(() => {
					// 赋值需要渲染的信息
					this.list = [{
							type: 'image',
							// path替换成你自己的图片，注意需要在小程序开发设置中配置域名
							path: this.qrcodeUrl,
							x: 235,
							y: 280,
							width: 280,
							height: 280
						},
						{
							type: 'textarea',
							width: 400,
							height: 150,
							x: 180,
							y: 670,
							text: '参加活动时,请出示二维码入场',
							size: 28,
							color: '#000'
						}
					];
					// 生成图片
					this.$nextTick(() => {
						// 要放在$nextTick()里，不然会空白
						this.$refs.poster.create();
					})
				}, 1000)
			}
		},
		computed: {
			...mapGetters(['userInfo', 'appConfig']),
		}
	}
</script>

<style lang="scss">
	.notAdmin {
		width: 100%;
		margin-top: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 260rpx;

		.notAdminBtn {
			width: 270rpx;
			height: 94rpx;
			background-color: #4E97AD;
			border-radius: 47rpx;
			margin-top: 90rpx;
			// margin-bottom: 130rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.notAdminDesc {
			font-size: 24rpx;
			font-weight: 500;
			color: #919191;
			margin-top: 35rpx;
		}

		.notAdminTitle {
			font-size: 36rpx;
			font-weight: 700;
			margin-top: 85rpx;
		}

		.notAdminIcon {
			width: 145rpx;
			height: 145rpx;
		}
	}

	.uni-select {
		height: 40px !important;
		margin-top: 23rpx !important;
		border-radius: 15rpx !important;
		padding-left: 55rpx;
		background-color: #fff;
	}

	.qrcodeBox {
		margin-top: 170rpx;
		margin-left: 235rpx;
		width: 280rpx;
		height: 280rpx;
	}

	.application,
	.success,
	.fail {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #EDF6FA;
		border-radius: 50rpx 50rpx 0 0;

		.again {
			width: 520rpx;
			height: 100rpx;
			margin-left: 115rpx;
			text-align: center;
			line-height: 100rpx;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-weight: 700;
			background-color: #4e97ad;
			color: #fff;
			margin-top: 285rpx;
			margin-bottom: 125rpx;
		}

		.failTips {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			font-weight: 500;
			margin-top: 40rpx;
			color: #919191;
		}

		.failResult {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			margin-top: 85rpx;
		}

		.failIcon {
			margin-top: 170rpx;
			margin-left: 300rpx;
			width: 150rpx;
			height: 150rpx;
		}

		.qrcodeBox {
			margin-top: 170rpx;
			margin-left: 235rpx;
			width: 280rpx;
			height: 280rpx;
		}

		.qrTips {
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			font-weight: 500;
			margin-top: 100rpx;
		}

		.save {
			width: 520rpx;
			height: 100rpx;
			margin-left: 115rpx;
			text-align: center;
			line-height: 100rpx;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-weight: 700;
			background-color: #4e97ad;
			color: #fff;
			margin-top: 205rpx;
			margin-bottom: 125rpx;
		}

		.submit {
			width: 520rpx;
			height: 100rpx;
			margin-left: 115rpx;
			text-align: center;
			line-height: 100rpx;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-weight: 700;
			background-color: #4e97ad;
			color: #fff;
			margin-top: 85rpx;
			margin-bottom: 125rpx;
		}

		.inputItem {
			width: 580rpx;
			margin-left: 86rpx;
			margin-bottom: 40rpx;

			.contactBox {
				display: flex;
				margin-top: 55rpx;
				justify-content: space-between;

				.copy {
					width: 38rpx;
					height: 38rpx;
				}

				.contactTel {
					font-size: 32rpx;
					font-weight: 700;
				}
			}

			.selBox {
				margin-top: 40rpx;
				display: flex;
				align-items: center;

				.sellabel {
					font-size: 28rpx;
					font-weight: 500;
					margin-left: 27rpx;
				}

				.sel {
					width: 37rpx;
					height: 37rpx;
				}
			}

			.inputlabel {
				font-size: 28rpx;
				font-weight: 500;
			}

			.input {
				width: 525rpx;
				height: 80rpx;
				// border: 1rpx solid #bfbfbf;
				background-color: #fff;
				border-radius: 15rpx;
				margin-top: 23rpx;
				padding-left: 55rpx;
			}
		}

		.applicationHead {
			width: 100%;
			height: 115rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #bfbfbf;
			margin-bottom: 70rpx;

			.step {
				width: 467rpx;
				height: 40rpx;
				margin-left: 40rpx;
			}

			.close {
				width: 40rpx;
				height: 40rpx;
				margin-left: 170rpx;
			}
		}
	}

	.bottomMenuBox {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 160rpx;
		display: flex;
		background-color: #fff;
		padding: 20rpx;

		.endBtn {
			width: 520rpx;
			height: 100rpx;
			margin-left: 20rpx;
			text-align: center;
			line-height: 100rpx;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-weight: 700;
			background-color: #EDEDED;
			color: #919191;
		}

		.btn {
			width: 520rpx;
			height: 100rpx;
			margin-left: 20rpx;
			text-align: center;
			line-height: 100rpx;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-weight: 700;
			background-color: #4e97ad;
			color: #fff;
		}

		.shareBtn {
			position: absolute;
			width: 134rpx;
			height: 100rpx;
			top: 20rpx;
			left: 40rpx;
			opacity: 0;
		}

		.share {
			width: 134rpx;
			height: 100rpx;
			margin-left: 40rpx;
		}
	}

	.infoBox {
		width: 100%;
		margin-top: 20rpx;
		padding: 50rpx 40rpx 65rpx 40rpx;
		background-color: #fff;

		.menuBox {
			margin-bottom: 70rpx;
			display: flex;

			.menuItem {
				font-size: 28rpx;
				font-weight: 700;
				margin-right: 45rpx;
				padding-bottom: 10rpx;
			}

			.menuActive {
				color: #4e97ad;
				border-bottom: 5rpx solid #4e97ad;
			}
		}
	}

	.topBox {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-bottom: 55rpx;
		background-color: #fff;

		.typeIcon {
			position: absolute;
			width: 130rpx;
			height: 130rpx;
			top: 640rpx;
			right: 30rpx;
		}

		.progressBox {
			margin-top: 36rpx;
			margin-left: 40rpx;
			display: flex;
			align-items: center;

			.num {
				font: size 20rpx;
				;
				font-weight: 500;
				margin-left: 30rpx;
			}

			.outer {
				position: relative;
				width: 270rpx;
				height: 10rpx;
				border-radius: 5rpx;
				background-color: #e6e6e6;
				margin-left: 30rpx;

				.inner {
					position: absolute;
					left: 0;
					top: 0;
					width: 270rpx;
					height: 10rpx;
					border-radius: 5rpx;
					background-color: #4e97ad;
				}
			}

			.progressLabel {
				font-size: 24rpx;
				font-weight: 500;
			}
		}

		.itemBox {
			display: flex;
			align-items: center;
			margin-left: 40rpx;
			margin-bottom: 30rpx;

			.itemText {
				font-size: 24rpx;
				font-weight: 500;
				margin-left: 25rpx;
			}

			.addressIcon {
				width: 24rpx;
				height: 32rpx;
			}

			.zigeIcon {
				width: 55rpx;
				height: 68rpx;
			}

			.timeIcon {
				width: 24rpx;
				height: 24rpx;
			}

			.personIcon {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.title {
			font-size: 36rpx;
			font-weight: 700;
			margin-left: 40rpx;
			margin-top: 50rpx;
			margin-bottom: 50rpx;
		}

		.cover {
			width: 100%;
			height: 617rpx;
		}
	}

	::v-deep .u-navbar {
		background-color: transparent !important;

		&::after {
			display: none !important;
		}

		.u-navbar__border {
			display: none !important;
		}
	}

	.u-icon__icon {
		color: #fff !important;
	}

	.u-title {
		color: #fff !important;
	}

	/deep/ .pyh-nv-box {
		position: fixed !important;
		top: 0;
	}

	.content {
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: #f9f9f9;
		overflow-y: scroll;
	}

	page {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
	}
</style>